<script>
init({
  title: 'Treegrid',
  desc: 'Use Plugin: <a href="https://github.com/maxazan/jquery-treegrid" target="_blank">jquery-treegrid</a> and bootstrap-table-treegrid.',
  links: [
    'https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css',
    'bootstrap-table.min.css'
  ],
  scripts: [
    'https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js',
    'bootstrap-table.min.js',
    'extensions/treegrid/bootstrap-table-treegrid.min.js'
  ]
})
</script>

<template>
  <table id="table"></table>
</template>

<script>
  const $table = $('#table')

  function mounted () {
    $table.bootstrapTable({
      url: 'json/treegrid.json',
      idField: 'id',
      showColumns: true,
      columns: [
        {
          field: 'ck',
          checkbox: true
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: 'statusFormatter'
        },
        {
          field: 'permissionValue',
          title: '权限值'
        }
      ],
      treeShowField: 'name',
      parentIdField: 'pid',
      onPostBody () {
        const columns = $table.bootstrapTable('getOptions').columns

        if (columns && columns[0][1].visible) {
          $table.treegrid({
            treeColumn: 1,
            onChange () {
              $table.bootstrapTable('resetView')
            }
          })
        }
      }
    })
  }

  window.typeFormatter = value => {
    if (value === 'menu') {
      return '菜单'
    }
    if (value === 'button') {
      return '按钮'
    }
    if (value === 'api') {
      return '接口'
    }
    return '-'
  }

  window.statusFormatter = value => {
    if (value === 1) {
      return '<span class="label label-success">正常</span>'
    }
    return '<span class="label label-default">锁定</span>'
  }
</script>
